<template>
 <main-nav-bar>
    <template v-slot:center-name>
      <div>我的成就</div>
    </template>
    <template v-slot:home-nav-back>
      <div><i class="iconfont icon-jiantou2"></i></div>
    </template>
  </main-nav-bar>
    <div>
        <div class="content">
            <div class="ach_li"  v-for="(item,index) in cateDetail" :key="index">
                <span>恭喜你完成本期打卡!</span>
                <div class="bgc">
                    <img src="https://qnhyd.laigl.com/9fca46e60c82238a2ba979bf1fd573b8.png" alt="">
                </div>
                <div class="right_top">
                    <img src="https://qnhyd.laigl.com/8b8b206128ab090911fc5a1f1a824ed7.png" alt="">
                </div>
                <div class="right_bot">
                    <img src="https://qnhyd.laigl.com/674cd4944cb2569a993e073f4215c386.png" alt="">
                </div>
                <div class="ach_p">
                    <div class="ach_p_top">
                        <p>{{item.cate}}</p>
                    </div>
                    <div class="ach_p_bt">
                        <!-- <p>sdfhshshsfhshsdhfghhhsdgsm,.balvdhggnv;lASLIdgg</p> -->
                        <p>{{item.book}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {request} from "../../network/request"
import MainNavBar from "../../components/content/mainnavbar/MainNavBar.vue";
    export default {
        data(){
            return{
                cateDetail:[]
            }
        },
        methods:{
        async gocateDetail(){
         const res = await request({
            url:"/v1.ucenter/cate_list",
            data:{
              user_id:sessionStorage.getItem("user_id"),
            }
          });
          this.cateDetail = res.data.data
          console.log(res);
        },
        },
        mounted(){
            this.gocateDetail()
        },
         components:{
            MainNavBar,
        }
    }
</script>

<style scoped>
.content{
    width: 89.067vw;
    padding-top: 21.333vw;
    margin: 0 auto;
}
.ach_li{
    position: relative;
    width: 79.467vw;
    height: 24.533vw;
    padding: 4vw 4.8vw;
    margin-bottom: 5.333vw;
    background-color: #fff4eb;
    background-image: url(https://qnhyd.laigl.com/1a07a901d8a294db04517dc6699ed838.png);
    background-repeat:no-repeat ;
    background-size:18.133vw
}
.ach_li img{
    width: 80vw;
    height: 17.867vw;
}
.ach_li span{
    font-size: 3.733vw;
    color: #6f0802;
    font-weight: bold;
}
.bgc{
    position: absolute;
}
.right_top{
    position: absolute;
    top: 1.867vw;
    right: 0.8vw;
}
.right_top img{
    width: 14.667vw;
    height: 13.333vw;
}
.right_bot{
 position: absolute;
 bottom: -1.067vw;
 right: 32vw;
}
.right_bot img{
    width: 4vw;
    height: 3.2vw;
}
.ach_p{
    position: absolute;
    padding-left:3.2vw ;
    padding-top: 4vw;
}
.ach_p_top{
    font-size: 2.667vw;
    color: #d4d1d0;
    margin-bottom: 1.867vw;
}
.ach_p_bt{
    width: 75vw;
    font-size: 4vw;
    color: #000;
    font-weight: bold;
}
.ach_p_bt p{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
p{
    margin: 0;
}

</style>